/**
 * Echarts
 * @Author: 向芳 <xiang_fang1992@126.com>
 * @Date: 2024/7/8 11:53
 * @LastEditTime: 2024/7/8 11:53
 */
import React, { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';

const HchartsShow: FC = () => {
    const legendData = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他'];
    const [selectLegend, setSelectLegend] = useState(legendData);
    let _chart ;

    
    const init = () => {
        console.log('init === ', selectLegend)
        _chart = echarts.init(document.getElementById('charts-auto') || document.getElementsByTagName('body')[0]);
        const optionsShow = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: selectLegend
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '邮件营销',
                    type: 'bar',
                    stack: '广告',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'bar',
                    stack: '广告',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'bar',
                    stack: '广告',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                    areaStyle: {},
                    markLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        data: [
                            [{type: 'min'}, {type: 'max'}]
                        ]
                    }
                },
                {
                    name: '百度',
                    type: 'bar',
                    barWidth: 5,
                    stack: '搜索引擎',
                    data: [620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name: '谷歌',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name: '必应',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name: '其他',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [62, 82, 91, 84, 109, 110, 120]
                }
            ]
        };

        _chart.setOption(optionsShow);
    };

    const handleLegendChange = (name: string) => {
        console.log('aaaa ', name, selectLegend, selectLegend.filter(item => item === name));
        const selected:boolean = (selectLegend && selectLegend.filter(item => item === name).length > 0);
        if(_chart) {
            if (selected) {
                setSelectLegend(selectLegend && selectLegend.filter(item => item !== name));
            } else {
                setSelectLegend([...selectLegend, name]);
            }
            console.log('testLegend   ', name, selectLegend)

            _chart.dispatchAction({
              type: !selected ? 'legendSelect' : 'legendUnSelect',
              // 或者使用'legendToggleSelect'来切换选中状态
              // type: 'legendToggleSelect',
              name,
            });
        }
        
      };

    // useEffect(() => {init(); return () => {_chart && _chart.dispose()};}, [selectLegend]);
    useEffect(() => init(), [selectLegend]);

  return (
    <div style={{width: '100%', display: 'flex'}} key="chart-content">
      <div style={{width: '420px', height: '100%' }} key="chart">
        {legendData.map(d => {
            return (
                <p style={{width: '300px', textAlign: 'center', cursor: 'pointer'}} onClick={() =>handleLegendChange(d)} key={d}>{d}</p>
            )
        })}
      </div>
      <div id="charts-auto" style={{ height: '600px', flex: 1 }} />
    </div>
  );
};
export default HchartsShow;
